<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="font2/iconfont.css">
    <style>
        *{
            box-sizing: border-box;
            list-style: none;
        }
        div{
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid aqua;
            display: flex;
            justify-content: center;
            padding-top: 200px;
            /* align-self: center; */
            border-radius: 50%;
            background-image: url(1434885706150.png);
            background-position: 48px 0px;
            /* background-size: 470px 350px; */
            background-repeat: no-repeat;
        }
        span{
            width: 50px;
            height: 50px;
            border: 1px solid  blue;
            line-height: 50px;
             text-align: center;
             border-radius: 50%;
             color: white;
        }
        .one{
            position: absolute;
            left: 40px;
            top: 50px;
        }
        .two{
            position: absolute;
            left: 30px;
            top: 100px;
        }
        .thrre{
            position: absolute;
            left: 25px;
            top: 155px;
        }
        .four{
            position: absolute;
            left: 45px;
            top: 210px;
        }
        .five{
            position: absolute;
            right: 40px;
            top: 50px;
        }
        .six{
            position: absolute;
            right: 30px;
            top: 100px;
        }
        .seven{
            position: absolute;
            right: 30px;
            top: 180px;
        }
        i{
            cursor: pointer;
        }
        .eight{
            position: absolute;
            font-weight: 200;
            bottom: 20px;
            left: 95px;
        }
        .nine{
            position: absolute;
            font-weight: 200;
            bottom: 25px;
            left: 140px;
        }
        .ten{
            position: absolute;
            font-weight: 200;
            bottom: 26px;
            left: 193px;
            
        }
    </style>
    <script src="imgss.js"></script>
    <!-- <script src="./jquery-1.12.4.js"></script> -->
</head>
<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <i class="iconfont icon-image one"></i>
        <i class="iconfont icon-shitingguanli two"></i>
        <i class="iconfont icon-Mileage thrre"></i>
        <i class="iconfont icon-chunvzuo four"></i>
        <i class="iconfont icon-qing five"></i>
        <i class="iconfont icon-celsius-line six"></i>
        <i class="iconfont icon-Entertainment seven"></i>
        <b class="eight">时</b>
        <b class="nine">分</b>
        <b class="ten">秒</b>
    </div>
    <aside >
        <!-- <s>ddfeawefewfwfe<br>fwewfe</s> -->
        <h3 class="sss">液晶显示屏</h3>
        <textarea id="yejing" style="width: 300px; height: 300px; display: block;"></textarea>
        <section style=" position: relative;;display: none; width: 300px; height: 300px; border: 1px solid black;">
            <dsb style="position: absolute; top: 0px; left: 283px;">X</dsb>
            <input type="text" name="" id="text" placeholder="请输入想听的歌曲">
            <ul style="height: 90%; overflow: auto; margin: 0;padding: 0;white-space:nowrap;">
           <li>
               欢迎光临
           </li>
            </ul>
        <audio autoplay controls loop style="position: absolute; bottom: 0px; left: 4px;width: 290px;height: 30px;"></audio>
        </section>
    </aside>
    <script>
        let date=new Date()
        // console.log(date)
        let box=document.querySelector(`div`)
        let dates=[date.getHours(),date.getMinutes(),date.getSeconds()]
        // console.log(dates)
        document.querySelectorAll(`span`).forEach(function(item,index){
            item.innerText=`${dates[index]}`
        setInterval(function(){
            for(let i=0;i<255;i++){
            let r=Math.ceil(Math.random()*255)
            let g=Math.ceil(Math.random()*255)
            let b=Math.ceil(Math.random()*255)
            item.style.color=`rgb(${r},${g},${b})`
            document.querySelector(`.sss`).style.color=`rgb(${g},${r},${b})`
           }
        },500)
        })
        let tiem=box.firstElementChild
        let fen=tiem.nextElementSibling
        let miao=fen.nextElementSibling
        let tiems=+tiem.innerText
        let fens=+fen.innerText
        let miaos=+miao.innerText
        setInterval(function(){
            miaos++
            if(miaos>59){
                miaos=0
                fens++
                if(fens>59){
                    fens=0
                    tiems++
                }
                if(tiems>24){
                    tiems=0
                }
            }
            tiem.innerText=`${tiems}`
            fen.innerText=`${fens}`
            miao.innerText=`${miaos}`
            if(miaos<10){
                miao.innerText=`0`+miaos
            }
            if(fens<10){
                fen.innerText=`0`+fens
            }
            if(tiems<10){
                tiem.innerText=`0`+tiems
            }
        },1000)
        document.querySelector(`.one`).onclick=function(){
          let arr=[`1434885706150.png`,`53.png`,`54.png`,`55.png`]
            let four=Math.round(Math.random()*3)
            box.style.backgroundImage=`url(${arr[four]})`
      }
      document.querySelector(`.two`).onclick=function(){
document.querySelector(`section`).style.display=`block`
document.querySelector(`#yejing`).style.display=`none`
      }
   
      document.querySelector(`#text`).onblur=function(){
        let liss= document.querySelectorAll(`li`)
        liss.forEach(function(a,b){
            a.remove()
        })
let songname=document.querySelector(`#text`).value
let xhr=new XMLHttpRequest()
xhr.open(`get`,`https://autumnfish.cn/search?keywords=${songname}`)
xhr.onload=function(){
    // let aaf
    let aa=JSON.parse(xhr.response)
    // console.log(aa)
   for(let i=0;i<aa.result.songs.length;i++){
       let aaf=document.createElement(`li`)
       aaf.innerHTML=`<p>${aa.result.songs[i].name}----------${aa.result.songs[i].album.name}</p>`
       aaf.setAttribute(`data`,`${aa.result.songs[i].id}`)
        //   console.log(aaf)
       document.querySelector(`ul`).appendChild(aaf)
   }
//    console.log(liss)
 liss= document.querySelectorAll(`li`)
   liss.forEach(function(c,d){
    // console.log(c)
c.onclick=function(){
    let url=+c.getAttribute(`data`)
    // console.log(url)
    let xhr=new XMLHttpRequest()
  
    xhr.open(`get`,`https://autumnfish.cn/song/url?id=${url}`)
    xhr.onload=function(){
        let ss=JSON.parse(xhr.response)
        // console.log(ss)
        document.querySelector(`audio`).setAttribute(`src`,ss.data[0].url)
    }
    xhr.send()
}
})
}
xhr.send()
}







document.querySelector(`dsb`).onclick=function(){
document.querySelector(`section`).style.display=`none`
document.querySelector(`#yejing`).style.display=`block`

}

    //   $(function(){
    //     $(``).appendTo(`div`)
    //       $(`.six`).on(`mouseover`,function(){
    //         $.get({
    //             url:`http://wthrcdn.etouch.cn/weather_mini`,
    //             data:{city:`深圳`},
          
    //             success:function(Temp){
    //                 dataType:`json`
    //                 let temp=JSON.parse(Temp)
    //                   console.log(temp)
    //                 $(`.gtemp`).text(`${temp.data.forecast[0].high} ${temp.data.forecast[0].low}`).show()
    //             }
    //         })
          
    //       })
    //       $(`.six`).on(`mouseout`,function(){
    //         $(`.gtemp`).hide()
    //       })
    //   })
//////////////////
// let b=document.createElement(`b`)
// b.classList.add(`gtemp`)
// b. style="display:none;position:absolute;left:80px;top:180px; font-weight:300; color: rgb(77, 241, 99);" 
// box.appendChild(b)
document.querySelector(`.six`).onmouseover=function(){
    let xhr= new XMLHttpRequest()
    xhr.open(`get`,`http://wthrcdn.etouch.cn/weather_mini?city=广州`)
    xhr.onload=function(){
        let temp=JSON.parse(xhr.response)
        document.querySelector(`#yejing`).innerText=`加载中……`
        console.log(temp)
        document.querySelector(`#yejing`).innerHTML=`${temp.data.forecast[0].date}<br>${temp.data.forecast[0].fengli}<br>${temp.data.forecast[0].fengxiang}<br>${temp.data.forecast[0].high}<br>${temp.data.forecast[0].low}<br>${temp.data.forecast[0].type}<br>注意：${temp.data.ganmao}`
    }
    xhr.send()
}
document.querySelector(`.six`).onmouseout=function(){
    document.querySelector(`#yejing`).innerText=`未上映……`
}
document.querySelector(`.four`).onmouseover=function(){
    document.querySelector(`#yejing`).innerText=`段子正在路上……`
    let xhr=new XMLHttpRequest()
    xhr.open(`get`,`https://autumnfish.cn/api/joke`)
    xhr.onload=function(){
        document.querySelector(`#yejing`).innerText=xhr.response
    }
    xhr.send()
}
// document.querySelector(`.four`).onmouseout=function(){
//     // document.querySelector(`#yejing`).innerText=`未上映……`

// }

    </script>
</body>
</html>